import {Button, Collapse, Form, Row, Col, Input, message} from 'antd'
import React, {memo, useState, useEffect} from 'react'
import {history} from 'umi'

import styles from './index.less'

import 'moment/locale/zh-cn'
import {viewDict, addDict, editDict} from '@/service/tool/dict'

const {Panel} = Collapse
const {TextArea} = Input

const add = memo((props: any) => {
	const [type, setType] = useState<string>()
	const [dictType, setDictType] = useState<string>()
	const [id, setId] = useState()
	const [pid, setPid] = useState()
	const [form] = Form.useForm<any>()

	// 初始化-详情数据
	const getView = () => {
		viewDict({id}).then((res: any) => {
			if (res?.success) {
				form.setFieldsValue({
					...res.data,
				})
			}
		})
	}
	useEffect(() => {
		if (id) {
			getView()
		}
	}, [id])

	// 根据路由判断当前页面状态
	useEffect(() => {
		// eslint-disable-next-line no-shadow
		const {id, pid, type} = props.location.query
		const hrefs = window.location.href
		if (pid) {
			setPid(() => pid)
		}
		if (id) {
			setId(() => id)
		}
		setDictType(() => type)
		if (hrefs.includes('view')) {
			setType('view')
		} else if (hrefs.includes('add')) {
			setType('add')
		} else if (hrefs.includes('edit')) {
			setType('edit')
		} else {
			setType('process')
		}
	}, [])

	const customizeHeader = (value: string) => (
		<div>
			<div className={styles.tip} />
			{value}
		</div>
	)
	// eslint-disable-next-line consistent-return
	const submit = async () => {
		const formData = await form.validateFields()
		if (!id) {
			addDict({...formData, id: pid, type: dictType}).then((res: any) => {
				if (res?.success) {
					message.success(res.msg)
					history.goBack()
				}
			})
		} else {
			editDict({...formData, id, type: dictType}).then((res: any) => {
				if (res?.success) {
					message.success(res.msg)
					history.goBack()
				}
			})
		}
	}

	return (
		<div className={styles.admittanceAdd}>
			<div className={`${styles.content} ${styles.formDetils}`}>
				<Form
					form={form}
					name="basic"
					layout="horizontal"
					labelCol={{flex: '100px'}}
					labelAlign="right"
					labelWrap
					initialValues={{remember: true}}
					autoComplete="off"
					disabled={type === 'view'}>
					<Collapse
						defaultActiveKey={['1', '2']}
						ghost
						expandIconPosition="end">
						<Panel header={customizeHeader('基础信息')} key="1">
							<Row gutter={12}>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="字典编号"
										name="value"
										rules={[{required: true}]}>
										<Input
											placeholder="请输入"
											maxLength={60}
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="字典名称"
										name="valueName"
										rules={[{required: true}]}>
										<Input
											placeholder="请输入"
											maxLength={60}
										/>
									</Form.Item>
								</Col>
							</Row>
						</Panel>
						<Panel header={customizeHeader('其他信息')} key="2">
							<Row gutter={12}>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="字典描述"
										name="description">
										<TextArea
											maxLength={100}
											placeholder="请输入（最多100个字）"
											autoSize={{minRows: 3, maxRows: 3}}
										/>
									</Form.Item>
								</Col>
							</Row>
						</Panel>
					</Collapse>
				</Form>
				<div className={styles.wrap}>
					{type === 'add' || type === 'edit' ? (
						<>
							<Button
								type="primary"
								htmlType="submit"
								onClick={submit}>
								保存
							</Button>
						</>
					) : (
						''
					)}
					<Button
						onClick={() => {
							history.go(-1)
						}}>
						取消
					</Button>
				</div>
			</div>
		</div>
	)
})
export default add
